<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建小镇 - 镇长日志</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../js/core.js"></script>
    <!-- 配置Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#457B9D', // 深蓝色
                        secondary: '#1D3557', // 藏青色
                        success: '#A8DADC', // 浅蓝色
                        warning: '#F1FAEE', // 浅灰色
                        danger: '#E63946', // 红色
                        info: '#8D99AE', // 蓝灰色
                        dark: '#1D3557', // 深色
                        light: '#F1FAEE', // 浅色
                        town: {
                            green: '#4E6E5D', // 小镇主题绿色
                            brown: '#8C6F5B', // 小镇主题棕色
                            lightGreen: '#B3C9B6', // 浅绿
                            lightBrown: '#DBC1AC', // 浅棕
                            bg: '#F8F4EA' // 背景色
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    backgroundImage: {
                        'town-pattern': "url('https://images.unsplash.com/photo-1493589976271-f9356dc48904?auto=format&fit=crop&q=80')",
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .btn-hover {
                transition: all 0.2s ease;
            }
            .btn-hover:hover {
                transform: translateY(-1px);
            }
            .town-transition {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="font-inter">
    <!-- 页面标题 -->
    <header class="bg-town-green shadow-md sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <a href="../../index.html" class="flex items-center space-x-2">
                        <i class="fa fa-home text-2xl text-town-lightGreen"></i>
                        <span class="text-xl font-semibold text-white">镇长日志</span>
                    </a>
                </div>
                
                <div class="hidden md:flex items-center space-x-4">
                    <a href="../../index.html" class="text-white hover:text-town-lightGreen transition-colors">
                        返回游戏
                    </a>
                    <a href="login.html" class="px-4 py-2 bg-town-lightGreen text-town-secondary rounded-md hover:bg-town-lightBrown transition-colors">
                        已有小镇
                    </a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="mobile-menu-btn" class="text-white hover:text-town-lightGreen transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-town-green border-t border-town-lightGreen/20">
            <div class="px-4 py-2 space-y-2">
                <a href="../../index.html" class="block py-2 text-white hover:text-town-lightGreen transition-colors">
                    返回游戏
                </a>
                <a href="login.html" class="block py-2 text-center bg-town-lightGreen text-town-secondary rounded-md hover:bg-town-lightBrown transition-colors">
                    已有小镇
                </a>
            </div>
        </div>
    </header>

    <main class="min-h-screen bg-town-bg py-8" style="background-image: url('https://images.unsplash.com/photo-1528460033278-a6ba57020470?q=80&w=1974&auto=format&fit=crop'); background-size: cover; background-position: center; background-attachment: fixed;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-center">
                <div class="w-full max-w-md">
                    <div class="bg-white/95 backdrop-blur-sm rounded-lg shadow-lg overflow-hidden border border-town-lightGreen/30">
                        <div class="p-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-town-secondary">创建新小镇</h2>
                                <p class="text-town-brown mt-2">建立您的专属小镇，开始精彩的镇长之旅</p>
                            </div>
                            
                            <!-- 注册表单 -->
                            <form id="register-form">
                                <div class="mb-4">
                                    <label for="username" class="block text-sm font-medium text-town-brown mb-1">小镇名称</label>
                                    <input type="text" id="username" name="username" required
                                        class="w-full px-4 py-2 border border-town-lightGreen/50 rounded-md focus:outline-none focus:ring-2 focus:ring-town-green focus:border-town-green transition-colors"
                                        placeholder="请输入小镇名称（3-20个字符）">
                                    <p id="username-error" class="mt-1 text-sm text-danger hidden">小镇名称格式不正确</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="email" class="block text-sm font-medium text-town-brown mb-1">联系邮箱</label>
                                    <input type="email" id="email" name="email" required
                                        class="w-full px-4 py-2 border border-town-lightGreen/50 rounded-md focus:outline-none focus:ring-2 focus:ring-town-green focus:border-primary transition-colors"
                                        placeholder="请输入联系邮箱地址">
                                    <p id="email-error" class="mt-1 text-sm text-danger hidden">邮箱格式不正确</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="password" class="block text-sm font-medium text-town-brown mb-1">小镇密钥</label>
                                    <div class="relative">
                                        <input type="password" id="password" name="password" required
                                            class="w-full px-4 py-2 border border-town-lightGreen/50 rounded-md focus:outline-none focus:ring-2 focus:ring-town-green focus:border-primary transition-colors"
                                            placeholder="请设置小镇密钥">
                                        <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-town-brown hover:text-town-green">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                    </div>
                                    <p id="password-error" class="mt-1 text-sm text-danger hidden">小镇密钥需包含字母、数字，且长度至少6位</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="confirm-password" class="block text-sm font-medium text-town-brown mb-1">确认密钥</label>
                                    <input type="password" id="confirm-password" name="confirm-password" required
                                        class="w-full px-4 py-2 border border-town-lightGreen/50 rounded-md focus:outline-none focus:ring-2 focus:ring-town-green focus:border-primary transition-colors"
                                        placeholder="请再次输入小镇密钥">
                                    <p id="confirm-password-error" class="mt-1 text-sm text-danger hidden">两次输入的密钥不一致</p>
                                </div>
                                

                                
                                <!-- 密码强度指示器 -->
                                <div id="password-strength" class="mb-4 hidden">
                                    <div class="flex items-center space-x-1 mb-1">
                                        <div id="strength-1" class="h-1 flex-1 rounded-full bg-town-lightGreen/50"></div>
                                        <div id="strength-2" class="h-1 flex-1 rounded-full bg-town-lightGreen/50"></div>
                                        <div id="strength-3" class="h-1 flex-1 rounded-full bg-town-lightGreen/50"></div>
                                        <div id="strength-4" class="h-1 flex-1 rounded-full bg-town-lightGreen/50"></div>
                                    </div>
                                    <span id="strength-text" class="text-xs text-town-brown"></span>
                                </div>
                                
                                <div class="flex items-start mt-4 mb-6">
                                    <div class="flex items-center h-5">
                                        <input id="terms" name="terms" type="checkbox" required
                                            class="h-4 w-4 text-town-green focus:ring-town-green border-town-lightGreen/50 rounded">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="terms" class="text-town-brown">我已阅读并同意</label>
                                        <a href="#" class="text-town-green hover:text-town-brown transition-colors">小镇公约</a>
                                        <span class="text-town-brown">和</span>
                                        <a href="#" class="text-town-green hover:text-town-brown transition-colors">镇长守则</a>
                                    </div>
                                </div>
                                <p id="terms-error" class="mt-1 text-sm text-danger hidden">请阅读并同意小镇公约和镇长守则</p>
                                
                                <button type="submit" id="register-btn"
                                    class="w-full py-2 px-4 bg-town-green text-white rounded-md hover:bg-town-brown transition-colors btn-hover font-medium">
                                    创建小镇
                                </button>
                            </form>
                        </div>
                        
                        <div class="p-6 bg-town-bg/30">
                            <div class="mt-6 border-t border-town-lightGreen/30 pt-6">
                                <p class="text-center text-sm text-town-brown mb-4">
                                    快速创建小镇
                                </p>
                                <div class="flex justify-center space-x-4">
                                    <button type="button" class="flex justify-center py-2 px-4 border border-town-lightGreen/50 rounded-md shadow-sm bg-white text-sm font-medium text-town-brown hover:bg-town-lightGreen/20 transition-colors">
                                        <span class="sr-only">使用微信注册</span>
                                        <i class="fa fa-weixin text-green-500"></i>
                                    </button>
                                    <button type="button" class="flex justify-center py-2 px-4 border border-town-lightGreen/50 rounded-md shadow-sm bg-white text-sm font-medium text-town-brown hover:bg-town-lightGreen/20 transition-colors">
                                        <span class="sr-only">使用QQ注册</span>
                                        <i class="fa fa-qq text-blue-500"></i>
                                    </button>
                                    <button type="button" class="flex justify-center py-2 px-4 border border-town-lightGreen/50 rounded-md shadow-sm bg-white text-sm font-medium text-town-brown hover:bg-town-lightGreen/20 transition-colors">
                                        <span class="sr-only">使用微博注册</span>
                                        <i class="fa fa-weibo text-red-500"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mt-6 text-center text-sm">
                                <span class="text-town-brown">已有小镇？</span>
                                <a href="login.html" class="font-medium text-town-green hover:text-town-brown transition-colors ml-1">
                                    登录小镇
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 通知弹窗 -->
    <div id="notification" class="fixed top-20 right-4 bg-white shadow-lg rounded-lg p-4 max-w-xs transform translate-x-full transition-transform duration-300 z-50 hidden">
        <div class="flex items-start space-x-3">
            <div id="notification-icon" class="w-8 h-8 rounded-full flex items-center justify-center bg-town-green/10 text-town-green">
                <i class="fa fa-info-circle"></i>
            </div>
            <div class="flex-1">
                <h4 id="notification-title" class="font-medium text-town-secondary"></h4>
                <p id="notification-message" class="text-town-brown text-sm mt-1"></p>
            </div>
        </div>
    </div>

    <script>
        // 邮箱验证函数
        function validateEmail(email) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailPattern.test(email);
        }
        
        // 密码验证函数
        function validatePassword(password) {
            // 基本密码验证：非空且长度至少为6位
            return password && password.length >= 6;
        }
    </script>
    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 密码显示切换
        const togglePassword = document.getElementById('toggle-password');
        const password = document.getElementById('password');
        
        if (togglePassword && password) {
            togglePassword.addEventListener('click', () => {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                togglePassword.querySelector('i').classList.toggle('fa-eye');
                togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
            });
        }

        // 密码长度提示（简化）
        if (password) {
            password.addEventListener('input', () => {
                const passwordValue = password.value;
                const passwordStrength = document.getElementById('password-strength');
                const strengthText = document.getElementById('strength-text');
                
                if (!passwordValue) {
                    passwordStrength.classList.add('hidden');
                    return;
                }
                
                passwordStrength.classList.remove('hidden');
                
                // 只检查长度要求
                if (passwordValue.length < 6) {
                    // 简化为只显示文本提示，不更新强度条
                    strengthText.textContent = '密码长度不能少于6个字符';
                    strengthText.className = 'text-xs text-danger mt-1';
                } else {
                    strengthText.textContent = '密码长度符合要求';
                    strengthText.className = 'text-xs text-town-green mt-1';
                }
            });
        }



        // 确保DOM完全加载后再执行脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 获取表单元素
            const registerForm = document.getElementById('register-form');
            const usernameInput = document.getElementById('username');
            const emailInput = document.getElementById('email');
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirm-password');
            const termsCheckbox = document.getElementById('terms');
            
            // 获取错误提示元素
            const usernameError = document.getElementById('username-error');
            const emailError = document.getElementById('email-error');
            const passwordError = document.getElementById('password-error');
            const confirmPasswordError = document.getElementById('confirm-password-error');
            const termsError = document.getElementById('terms-error');
            
            // 用户名验证函数 - 分步检查逻辑
            function validateUsername(username) {
                let errorMessage = '';
                
                // 分步检查：先检查长度
                if (username.length === 0) {
                    errorMessage = '请输入小镇名称';
                } else if (username.length < 2) {
                    errorMessage = '小镇名称长度不能少于2个字符';
                } else if (username.length > 20) {
                    errorMessage = '小镇名称长度不能超过20个字符';
                } else {
                    // 然后检查字符类型
                    const usernamePattern = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/;
                    if (!usernamePattern.test(username)) {
                        errorMessage = '小镇名称只能包含中文、字母、数字和下划线';
                    }
                }
                
                if (errorMessage) {
                    usernameError.textContent = errorMessage;
                    usernameError.classList.remove('hidden');
                    return false;
                } else {
                    usernameError.classList.add('hidden');
                    return true;
                }
            }
            
            // 邮箱验证函数
            function validateEmailField(email) {
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!email || !emailPattern.test(email)) {
                    emailError.classList.remove('hidden');
                    return false;
                } else {
                    emailError.classList.add('hidden');
                    return true;
                }
            }
            
            // 密码验证函数 - 简化为仅长度验证
            function validatePasswordField(password) {
                // 只检查密码长度，移除复杂的字符类型验证
                if (!password || password.length < 6) {
                    if (passwordError) {
                        passwordError.textContent = '密码长度不能少于6个字符';
                        passwordError.classList.remove('hidden');
                    }
                    return false;
                } else {
                    if (passwordError) {
                        passwordError.classList.add('hidden');
                    }
                    return true;
                }
            }
            
            // 确认密码验证函数
            function validateConfirmPassword(confirmPwd, originalPwd) {
                if (confirmPwd !== originalPwd) {
                    confirmPasswordError.classList.remove('hidden');
                    return false;
                } else {
                    confirmPasswordError.classList.add('hidden');
                    return true;
                }
            }
            
            // 协议勾选验证函数
            function validateTerms(checked) {
                if (!checked) {
                    termsError.classList.remove('hidden');
                    return false;
                } else {
                    termsError.classList.add('hidden');
                    return true;
                }
            }
            
            // 添加实时验证事件监听器
            // 用户名实时验证
            usernameInput.addEventListener('input', function() {
                validateUsername(this.value);
            });
            
            usernameInput.addEventListener('blur', function() {
                validateUsername(this.value);
            });
            
            // 邮箱实时验证
            emailInput.addEventListener('input', function() {
                validateEmailField(this.value);
            });
            
            emailInput.addEventListener('blur', function() {
                validateEmailField(this.value);
            });
            
            // 密码实时验证
            passwordInput.addEventListener('input', function() {
                const isValid = validatePasswordField(this.value);
                // 当密码改变时，同步验证确认密码
                if (confirmPasswordInput.value) {
                    validateConfirmPassword(confirmPasswordInput.value, this.value);
                }
            });
            
            passwordInput.addEventListener('blur', function() {
                validatePasswordField(this.value);
            });
            
            // 确认密码实时验证
            confirmPasswordInput.addEventListener('input', function() {
                validateConfirmPassword(this.value, passwordInput.value);
            });
            
            confirmPasswordInput.addEventListener('blur', function() {
                validateConfirmPassword(this.value, passwordInput.value);
            });
            
            // 协议勾选实时验证
            termsCheckbox.addEventListener('change', function() {
                validateTerms(this.checked);
            });
            
            // 表单提交事件处理
            if (registerForm) {
                registerForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const username = usernameInput.value;
                    const email = emailInput.value;
                    const password = passwordInput.value;
                    const confirmPassword = confirmPasswordInput.value;
                    const terms = termsCheckbox.checked;
                    const registerBtn = document.getElementById('register-btn');
                    
                    let isValid = true;
                    
                    if (isValid) {
                        // 禁用按钮防止重复提交
                        if (registerBtn) {
                            registerBtn.disabled = true;
                            registerBtn.textContent = '创建中...';
                        }
                        
                        // 这里可以添加表单提交的逻辑
                        // 模拟表单提交成功
                        setTimeout(function() {
                            // 创建用户对象
                            const userData = {
                                id: Date.now().toString(),
                                username: username,
                                email: email,
                                password: password,
                                avatar: '',
                                points: 0,
                                registerDate: new Date().toISOString(), // 添加注册日期
                                lastLogin: new Date().toISOString() // 添加首次登录时间
                            };
                            
                            // 保存用户数据到localStorage
                            const users = JSON.parse(localStorage.getItem('users') || '[]');
                            users.push(userData);
                            localStorage.setItem('users', JSON.stringify(users));
                            
                            // 设置当前用户信息（保存到所有键确保兼容性）
                            if (typeof setUserInfo === 'function') {
                                setUserInfo(userData);
                            } else {
                                // 如果setUserInfo不可用，直接保存到localStorage所有键
                                localStorage.setItem('currentUser', JSON.stringify(userData));
                                localStorage.setItem('user', JSON.stringify(userData));
                                localStorage.setItem('userInfo', JSON.stringify(userData));
                            }
                            
                            // 简单重定向到首页
                            window.location.href = 'index.html';
                        }, 1500);
                    }
                });
            }
        });
    </script>
</body>
</html>